<template>
  <div id="app">
    <tbody>
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>科目</th>
        <th>成绩</th>
        <th>考试时间</th>
        <th class="jcc">操作</th>
        <th class="jcc">全选:<input v-model="isAll" type="checkbox" /> <a href="" @click.prevent="batchDeleteBuild(multipleSection)">批量删除</a></th>
      </tr>
      <!-- item(数组里面的每一个对象) item是被迭代的数组元素别名 -->
      <!-- 为了给Vue提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key (建议使用id) -->
      <tr v-for="item in list" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.subjects }}</td>
        <!-- 动态设置类名，如果小于60为ture(增加红色类，如果为false则不标红) -->
        <td :class="{ redStr: item.score < 60 }">{{ item.score }}</td>
        <td>{{ item.nowTime }}</td>
        <td class="tac">
          <p class="jcc">
            <a href="" @click.prevent="">编辑</a>
            <a href="" @click.prevent="delItem(item)">删除</a>
            <input v-model="item.c" type="checkbox" />
          </p>
        </td>
      </tr>
      <div class="sum">
        <!-- 通过计算属性以及reduce方法获取总分 -->
        <span>班级总分：{{ scoresum }}分</span>
        <!-- 利用toFixed方法获取2位小数 总分/数组长度 -->
        <span>班级平均分：{{ (scoresum / list.length).toFixed(2) }}分</span>
      </div>
    </tbody>

    <form class="kemu">
      <b
        >添加学生成绩
        <button v-show="isShow2" @click.prevent="btn2">编辑</button>
      </b>
      <div v-show="isShow1">
        <p>姓名：<input type="text" :placeholder="tis2" v-model="name" /></p>
        <p>科目：<input type="text" :placeholder="tis" v-model="subjects" /></p>
        <p>分数：<input type="text" :placeholder="tis1" v-model="score" /></p>
        <div class="btn111">
          <button @click.prevent="addscore">添加</button>
          <button @click.prevent="btn3">取消</button>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      tis: "请输入科目",
      tis1: "请输入分数",
      tis2: "请输入姓名",
      multipleSection: [],
      // 加载学生的科目以及成绩的数据
      // 加载原始数据
      list: [
        {
          subjects: "Ajax",
          score: 79,
          name: "小紫",
          id: "1656407974",
          nowTime: "2022/6/28 17:19:34",
          c:false,
        },
        {
          subjects: "JS高级",
          score: 59,
          name: "小蓝",
          id: "1656388768",
          nowTime: "2022/6/28 11:59:28",
          c:false,
        },
        {
          subjects: "web api",
          score: 100,
          name: "小白",
          id: "1656382252",
          nowTime: "2022/6/28 10:10:52",
          c:false,
        },
        {
          subjects: "移动web",
          score: 99,
          name: "小黄",
          id: "1656382321",
          nowTime: "2022/6/28 10:12:01",
          c:false,
        },
      ],
      allchecked: false, // table表头复选框字段
      subjects: "", //输入的科目存入
      score: "", //成绩存入
      name: "", //姓名存入
      nowTime: "", //考试时间存入'
      isShow1: false, //编辑的内容，默认关闭
      isShow2: true, //编辑按钮，默认开启
    };
  },
  
  methods: {
    //批量删除选中数据方法
    batchDeleteBuild() {
      //判断是否选择了数据
      if (this.multipleSection.length == 0) {
        alert("请选择要删除的数据");
        return;
      }
      //如果有选中的数据，那么弹出消息框
      const confirmDelete =  this.$confirm(
        "此操作会永久删除建筑信息，是否删除？",
        "提示",
        {
          confimrButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(err => err);
      //如果用户确认删除，则返回字符串confirm
      //如果用户取消删除，则返回字符串cancel
      if (confirmDelete !== "confirm") {
        return this.$message.info("已取消");
      }
      //将选中的数据推到deleteCode数组中
      for (var i = 0; i < this.multipleSection.length; i++) {
        var j = i;
        var id = this.multipleSection[j].id;
        this.deleteCode.push(id);
      }
      //删除deleteCode中的数据
      const { data: res } =  this.$axios.delete(
        "/question/DeleteQuestionBatch",
        {
          data: this.deleteCode
        }
      );
      if (res.code != "SUCCESS") {
        return this.$message.error("删除课程信息失败！");
      }
      this.deleteCode = [];
    },

    btn2() {
      (this.isShow1 = !this.isShow1),
        (this.isShow2 = !this.isShow2),
        (this.name = "");
      // 清空成绩
      this.score = "";
      //清空科目
      this.subjects = "";
    },
    btn3() {
      (this.isShow1 = !this.isShow1), (this.isShow2 = !this.isShow2);
    },
    addscore() {
      //非空判断，如果当前(姓名/考试科目/学生成绩)的值为空则提示不能为空
      //this.name有值则为真，取反则它是空(假)则返回真(提示不能为空)
      if (!this.name) {
        alert("输入的学生姓名不能为空！");
        return;
      } else if (!this.subjects) {
        alert("输入的考试科目不能为空！");
      } else if (!this.score) {
        alert("输入的学生成绩不能为空！");
        return;
      } else {
        const item = {
          //学生姓名存入
          name: this.name,
          //学生成绩存入 需要数字类型，所以在前面加一个+进行转换
          score: +this.score,
          //存入考试科目
          subjects: this.subjects,
          //获取当前的考试时间
          nowTime: new Date().toLocaleString(),
          //利用时间戳来做一个id
          id: parseInt(new Date().getTime() / 1000),
        };
        // 在list前面添加 item    unshift在前面添加
        this.list.unshift(item);
        // 清空name
        this.name = "";
        // 清空成绩
        this.score = "";
        //清空科目
        this.subjects = "";
      }
    },
    //删除点击事件  获取元素
    delItem(item) {
      // 查找id元素在list里的下标
      const id = this.list.findIndex((value) => value.id == item.id);
      //删除
      // splice 功能（从第几个元素，删除几个 添加内容）
      this.list.splice(id, 1);
    },
    // delAll(item){

    // }
  },
  //计算属性
  computed: {
    scoresum() {
      //reduce方法使用示例
      // reduce(function(a,b,c,d),起始值);
      // a 必须  b 必须   c 可选    d 可选      起始值 可选
      // a：启动时，如果reduce定义了起始值，则会将起始值赋给a，
      // 如果没有设定起始值，则将数组第一个值赋给a，
      // 运行时，第二次及后续执行时，会将前一次执行的结果赋给a。
      // b：启动时，如果a为起始值，b则为数组第一个值，如果a为数组第一个值，b则为第二个
      // 运行时，每次调用，都会按顺序将b当前位置的下一位值赋给b。
      // c：reduce函数会自动设置该值，它的值是b当前数组的坐标，从0开始
      // d：如果你在函数中需要调用数组对象，reduce函数会将b的数组对象赋给d，以满足需要。

      //reduce方法，遍历数组，acc=累加结果 cur=当前值 0=初始值
      //累加所有学生的成绩并计算
      return this.list.reduce((acc, cur) => acc + cur.score, 0);
    },
    isAll: {
      set(val) {
        this.list.forEach((item) => {
          item.c = val;
        });
      },
      get() {
        // 使用every方法遍历数组，如果item.c都会true则返回true
        //小选框都选中时返回一个ture的值给全选的框，使它选中
        return this.list.every((item) => {
          return item.c === true;
        });
      },
    },
  },
};
</script>

<style>
.jcc {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap
}
.tac {
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn111 {
  display: flex;
  justify-content: space-around;
}
table {
  border-collapse: collapse;
}
th,
td {
  width: 150px;
  height: 40px;
  border: 1px solid black;
  font-size: 12px;
  text-align: center;
}
#app {
  color: purple;
  margin-top: 15px;
  display: flex;
  justify-content: center;
}
.redStr {
  color: red;
}
.sum {
  margin-top: 15px;
  text-align: center;
}
span:nth-child(2) {
  margin-left: 35px;
}
.kemu input {
  height: 20px;
  width: 150px;
}
.kemu {
  width: 250px;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-left: 25px;
}
a:nth-child(2) {
  margin-left: 10px;
}
</style>
